GPU Canvas

GPU Canvas 让 Rive 文件能在 Web 运行时中渲染 3D 与着色器内容。它按 Rive 实例选择启用，并在 @rive-app/webgl2 2.42.0+ 中可用。

⚠️

GPU Canvas 目前为实验性功能。API 可能在次版本中变更，而无需主版本升级。

要求

仅限 @rive-app/webgl2。 Canvas2D 包（@rive-app/canvas、@rive-app/canvas-lite）目前尚不支持 GPU Canvas。
useOffscreenRenderer 必须保持为 false。 GPU Canvas 需要每个 <canvas> 拥有独立的 WebGL 上下文，而离屏渲染器模式会在页面上的所有 canvas 之间共享一个上下文。Web 运行时中该选项默认为 false，因此除非你将其设为 true，否则无需改动。

启用 GPU Canvas

创建 Rive 实例时传入 enableGPUCanvas: true：

import { Rive } from "@rive-app/webgl2";

const rive = new Rive({
  src: "my_file.riv",
  canvas: document.getElementById("canvas"),
  stateMachine: "State Machine 1",
  autoplay: true,
  autoBind: true,
  enableGPUCanvas: true,
});

GPU Canvas 默认关闭，但未来的主版本中可能会改变这一默认行为。

在缓存文件上启用 GPU Canvas

RiveFile 接受相同的 enableGPUCanvas 标志，且一旦构造完成便无法更改：

import { RiveFile, Rive } from "@rive-app/webgl2";

const riveFile = new RiveFile({
  src: "my_file.riv",
  enableGPUCanvas: true,
});
await riveFile.init();

const rive = new Rive({
  riveFile,
  canvas: document.getElementById("canvas"),
  stateMachine: "State Machine 1",
  autoplay: true,
  autoBind: true,
  enableGPUCanvas: true,
});

文件上的标志优先于 new Rive() 上的同名属性：以 enableGPUCanvas: true 创建的 RiveFile 会通过所需的延迟渲染技术进行渲染，即使 Rive 实例以 enableGPUCanvas: false（或未设置）创建，运行时也会记录一条警告。

⚠️

GPU Canvas 的 RiveFile 不能在多个 Rive 实例之间共享。 渲染器会将文件绑定到单个 <canvas>，因此你传入的第一个 Rive 实例会占用它。

额外的 Rive 实例仍会加载，但不会使用你传入的 RiveFile。相反，运行时会记录一条警告，并从该文件已有的 buffer 创建一份新的 .riv 副本。因此，你通过原始 RiveFile 读取或配置的任何内容都不会应用到这些额外实例上。

限制

每个 GPU Canvas 实例占用自己的 WebGL 上下文，而浏览器会限制一个页面可以持有的上下文数量，因此请仅对需要它的图形启用。参见 WebGL 上下文限制。

要求​

启用 GPU Canvas​

在缓存文件上启用 GPU Canvas​

限制​

相关文档​

要求

启用 GPU Canvas

在缓存文件上启用 GPU Canvas

限制

相关文档